/*
 * @Author: liangshuchang
 * @Description:  运单详情 路线流程
 */

import React, { Fragment } from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';
import {
  px2dp, fontColorCoffee, fontColorLightGray, fontColorDeepRed, fontColorSecDeepGray
} from '../../../common/styles/index';
import DashLine from '../../../common/dashLine';

export default class TransportLine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { detail, style } = this.props;
    let status = detail.wayBill ? detail.wayBill.state : 0;
    // let wayBillCode = detail.wayBill ? detail.wayBill.wayBillCode : "";
    return (
      <>
        <View style={[styles.line, style]}>
          <View style={styles.flexB}>
            <Text style={{ color: '#999896', fontSize: px2dp(12) * 2 }}>
              <Text style={{}}>运单编号：</Text>
              {detail.waybillNo}
            </Text>
            {this.getStatus(status)}
          </View>
          {/* {
                        detail.routerFrom === "driverDetail" ? null :
                        <View style={styles.flexB}>
                            <Text style={{ color: '#333232', fontSize: px2dp(16) * 2 }}>运费</Text>
                            <Text style={{ color: '#333232', fontSize: px2dp(20) * 2 }}><Text>{detail.freightCarownerPer}</Text> 元/吨</Text>
                        </View>
                    } */}

          <View style={styles.flexB}>
            <Text style={{ color: '#333232', fontSize: px2dp(16) * 2 }}>运费</Text>
            <Text style={{ color: '#333232', fontSize: px2dp(20) * 2 }}>
              <Text>{detail.freightCarownerPer}</Text>
              {' '}
              元/吨
            </Text>
          </View>
          {/* <TouchableOpacity
                activeOpacity={0.8}
                style={styles.checkLine}
            >
                <Text style={styles.lineText}>查看路线</Text>
                <Image style={styles.rightIcon} source={require('../../../image/wl/icon_right_origre.png')}/>
            </TouchableOpacity> */}

          {/* <View style={styles.lineStep}>
                <View style={styles.flexB}>
                    <Image
                        style={{ width: px2dp(40), height: px2dp(40), marginRight: px2dp(20) }}
                        source={require('../../../image/icons/zhuang_icon.png')}
                        resizeMode="stretch"
                    />
                    {
                        detail.addrEnd.map((v, i) => {
                            return (
                                <View style={{flexDirection:'row',flex:1}} >
                                    <Text style={{flex:1,textAlign:'center'}} numberOfLines={1} ellipsizeMode="tail">运往 {v.district}</Text>
                                    <Image
                                            style={{ width: px2dp(40), height: px2dp(40),marginLeft:px2dp(10),marginRight:px2dp(10)}}
                                            source={require('../../../image/icons/xie_icon.png')}
                                            resizeMode="stretch"
                                        />
                                </View>
                            )
                        })
                    }
                </View>
                <View style={[styles.flexB,styles.mt20]}>

                    <View style={[styles.flexB,{flex:1}]}>
                        {this.getfirstIcon(detail.carLocal)}
                        <View style={{flex:1,flexDirection:'row',alignItems:'center'}}>
                            {this.getotherIcon(detail,false)}
                        </View>

                    </View>
                    {this.getotherIcon(detail,true)}

                </View>
            </View> */}
        </View>
      </>
    );
  }

    // 获取状态显示
    getStatus = (data) => {
      if (data === 0) {
        return <Text style={[styles.headerConfirm, { color: fontColorDeepRed }]}>待装货</Text>;
      } if (data === 1) {
        return <Text style={[styles.headerConfirm, { color: fontColorCoffee }]}>运输中</Text>;
      } if (data === 2) {
        return <Text style={[styles.headerConfirm, { color: '#2CBD26' }]}>已送达</Text>;
      } if (data === 3) {
        return <Text style={[styles.headerConfirm, { color: fontColorSecDeepGray }]}>已完成</Text>;
      } if (data === -2) {
        return <Text style={[styles.headerConfirm, { color: fontColorDeepRed }]}>作废</Text>;
      }
    }

    // 获取开始运输路线的icon展示
    getfirstIcon = (data) => {
      if (data === 1) {
        return <View style={[styles.circle, { borderColor: '#CDCCC9' }]} />;
      } if (data === 2) {
        return <Image
          style={{ width: px2dp(42), height: px2dp(28), }}
          source={require('../../../image/icons/icon_car.png')}
          resizeMode='stretch'
        />;
      }
      return <View style={[styles.circle, { borderColor: fontColorCoffee }]} />;
    }

    getotherIcon = (data, flag) => {
      if (data.localCount === data.carLocal && flag) {
        return <Image
          style={{ width: px2dp(42), height: px2dp(28), }}
          source={require('../../../image/icons/icon_car.png')}
          resizeMode='stretch'
        />;
      }
      if (!flag) {
        if (data.addrEnd.length > 1) {
          if (data.carLocal === 3) {
            return <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
              <View style={{ backgroundColor: fontColorCoffee, height: 2, flex: 1 }} />
              <Image
                style={{ width: px2dp(42), height: px2dp(28), }}
                source={require('../../../image/icons/icon_car.png')}
                resizeMode='stretch'
              />
              <DashLine styleItem={{ height: 2 }} style={{ flex: 3, }} />

            </View>;
          } if (data.carLocal === data.localCount) {
            return <View style={{ backgroundColor: fontColorCoffee, height: 2, flex: 1 }} />;
          }
          return <DashLine styleItem={{ height: 2, }} style={{ flex: 1, }} />;
        }
        if (data.carLocal === data.localCount) {
          return <View style={{ backgroundColor: fontColorCoffee, height: 2, flex: 1 }} />;
        }
        return <DashLine styleItem={{ height: 2, flex: 1 }} />;
      }
      return <View style={[styles.circle, { borderColor: '#CDCCC9' }]} />;
    }
}

const styles = StyleSheet.create({
  line: {
    backgroundColor: 'white',
    // paddingTop: px2dp(12),
    // paddingLeft: px2dp(16),
    // paddingBottom: px2dp(12),
    // paddingRight: px2dp(16),
    // position:'absolute',
    // top:0,
    // height:px2dp(292),
    // width:'100%',
    // shadowColor: 'rgba(0, 0, 0, 0.05)',
    // shadowOffset: {
    //     width: 0,
    //     height: 6
    // },
    // elevation: 6,

    margin: px2dp(12) * 2,
    marginBottom: 0,
    borderRadius: 8,

  },
  flexB: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: px2dp(12) * 2
  },
  lineStep: {
    backgroundColor: '#F5F5F5',
    paddingTop: px2dp(20),
    paddingLeft: px2dp(16),
    paddingBottom: px2dp(20),
    paddingRight: px2dp(16),
    borderRadius: px2dp(6),
    marginTop: px2dp(30)
  },
  circle: {
    width: px2dp(20),
    height: px2dp(20),
    borderRadius: px2dp(20),
    borderWidth: px2dp(4),
    backgroundColor: 'white'
  },
  mt20: {
    marginTop: px2dp(20)
  },
  checkLine: {
    borderTopColor: '#E6E3E1',
    borderTopWidth: px2dp(1),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: px2dp(10) * 2,
    paddingBottom: px2dp(10) * 2,
  },
  lineText: {
    color: '#BA914A',
    fontSize: px2dp(14) * 2
  },
  rightIcon: {
    width: px2dp(12) * 2,
    height: px2dp(12) * 2
  }
});
